<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='Ext-Editor-method-constructor'><span id='Ext-Editor'>/**
</span></span> * @class Ext.Editor
 * @extends Ext.Component
 * A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic.
 * @constructor
 * Create a new Editor
 * @param {Object} config The config object
 * @xtype editor
 */
Ext.Editor = function(field, config){
    if(field.field){
        this.field = Ext.create(field.field, 'textfield');
        config = Ext.apply({}, field); // copy so we don't disturb original config
        delete config.field;
    }else{
        this.field = field;
    }
    Ext.Editor.superclass.constructor.call(this, config);
};

Ext.extend(Ext.Editor, Ext.Component, {
<span id='Ext-Editor-cfg-field'>    /**
</span>    * @cfg {Ext.form.Field} field
    * The Field object (or descendant) or config object for field
    */
<span id='Ext-Editor-cfg-allowBlur'>    /**
</span>     * @cfg {Boolean} allowBlur
     * True to {@link #completeEdit complete the editing process} if in edit mode when the
     * field is blurred. Defaults to &lt;tt&gt;true&lt;/tt&gt;.
     */
    allowBlur: true,
<span id='Ext-Editor-cfg-autoSize'>    /**
</span>     * @cfg {Boolean/String} autoSize
     * True for the editor to automatically adopt the size of the underlying field, &quot;width&quot; to adopt the width only,
     * or &quot;height&quot; to adopt the height only, &quot;none&quot; to always use the field dimensions. (defaults to false)
     */
<span id='Ext-Editor-cfg-revertInvalid'>    /**
</span>     * @cfg {Boolean} revertInvalid
     * True to automatically revert the field value and cancel the edit when the user completes an edit and the field
     * validation fails (defaults to true)
     */
<span id='Ext-Editor-cfg-ignoreNoChange'>    /**
</span>     * @cfg {Boolean} ignoreNoChange
     * True to skip the edit completion process (no save, no events fired) if the user completes an edit and
     * the value has not changed (defaults to false).  Applies only to string values - edits for other data types
     * will never be ignored.
     */
<span id='Ext-Editor-cfg-hideEl'>    /**
</span>     * @cfg {Boolean} hideEl
     * False to keep the bound element visible while the editor is displayed (defaults to true)
     */
<span id='Ext-Editor-cfg-value'>    /**
</span>     * @cfg {Mixed} value
     * The data value of the underlying field (defaults to &quot;&quot;)
     */
    value : &quot;&quot;,
<span id='Ext-Editor-cfg-alignment'>    /**
</span>     * @cfg {String} alignment
     * The position to align to (see {@link Ext.Element#alignTo} for more details, defaults to &quot;c-c?&quot;).
     */
    alignment: &quot;c-c?&quot;,
<span id='Ext-Editor-cfg-offsets'>    /**
</span>     * @cfg {Array} offsets
     * The offsets to use when aligning (see {@link Ext.Element#alignTo} for more details. Defaults to &lt;tt&gt;[0, 0]&lt;/tt&gt;.
     */
    offsets: [0, 0],
<span id='Ext-Editor-cfg-shadow'>    /**
</span>     * @cfg {Boolean/String} shadow &quot;sides&quot; for sides/bottom only, &quot;frame&quot; for 4-way shadow, and &quot;drop&quot;
     * for bottom-right shadow (defaults to &quot;frame&quot;)
     */
    shadow : &quot;frame&quot;,
<span id='Ext-Editor-cfg-constrain'>    /**
</span>     * @cfg {Boolean} constrain True to constrain the editor to the viewport
     */
    constrain : false,
<span id='Ext-Editor-cfg-swallowKeys'>    /**
</span>     * @cfg {Boolean} swallowKeys Handle the keydown/keypress events so they don't propagate (defaults to true)
     */
    swallowKeys : true,
<span id='Ext-Editor-cfg-completeOnEnter'>    /**
</span>     * @cfg {Boolean} completeOnEnter True to complete the edit when the enter key is pressed. Defaults to &lt;tt&gt;true&lt;/tt&gt;.
     */
    completeOnEnter : true,
<span id='Ext-Editor-cfg-cancelOnEsc'>    /**
</span>     * @cfg {Boolean} cancelOnEsc True to cancel the edit when the escape key is pressed. Defaults to &lt;tt&gt;true&lt;/tt&gt;.
     */
    cancelOnEsc : true,
<span id='Ext-Editor-cfg-updateEl'>    /**
</span>     * @cfg {Boolean} updateEl True to update the innerHTML of the bound element when the update completes (defaults to false)
     */
    updateEl : false,

    initComponent : function(){
        Ext.Editor.superclass.initComponent.call(this);
        this.addEvents(
<span id='Ext-Editor-event-beforestartedit'>            /**
</span>             * @event beforestartedit
             * Fires when editing is initiated, but before the value changes.  Editing can be canceled by returning
             * false from the handler of this event.
             * @param {Editor} this
             * @param {Ext.Element} boundEl The underlying element bound to this editor
             * @param {Mixed} value The field value being set
             */
            &quot;beforestartedit&quot;,
<span id='Ext-Editor-event-startedit'>            /**
</span>             * @event startedit
             * Fires when this editor is displayed
             * @param {Ext.Element} boundEl The underlying element bound to this editor
             * @param {Mixed} value The starting field value
             */
            &quot;startedit&quot;,
<span id='Ext-Editor-event-beforecomplete'>            /**
</span>             * @event beforecomplete
             * Fires after a change has been made to the field, but before the change is reflected in the underlying
             * field.  Saving the change to the field can be canceled by returning false from the handler of this event.
             * Note that if the value has not changed and ignoreNoChange = true, the editing will still end but this
             * event will not fire since no edit actually occurred.
             * @param {Editor} this
             * @param {Mixed} value The current field value
             * @param {Mixed} startValue The original field value
             */
            &quot;beforecomplete&quot;,
<span id='Ext-Editor-event-complete'>            /**
</span>             * @event complete
             * Fires after editing is complete and any changed value has been written to the underlying field.
             * @param {Editor} this
             * @param {Mixed} value The current field value
             * @param {Mixed} startValue The original field value
             */
            &quot;complete&quot;,
<span id='Ext-Editor-event-canceledit'>            /**
</span>             * @event canceledit
             * Fires after editing has been canceled and the editor's value has been reset.
             * @param {Editor} this
             * @param {Mixed} value The user-entered field value that was discarded
             * @param {Mixed} startValue The original field value that was set back into the editor after cancel
             */
            &quot;canceledit&quot;,
<span id='Ext-Editor-event-specialkey'>            /**
</span>             * @event specialkey
             * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed.  You can check
             * {@link Ext.EventObject#getKey} to determine which key was pressed.
             * @param {Ext.form.Field} this
             * @param {Ext.EventObject} e The event object
             */
            &quot;specialkey&quot;
        );
    },

    // private
    onRender : function(ct, position){
        this.el = new Ext.Layer({
            shadow: this.shadow,
            cls: &quot;x-editor&quot;,
            parentEl : ct,
            shim : this.shim,
            shadowOffset: this.shadowOffset || 4,
            id: this.id,
            constrain: this.constrain
        });
        if(this.zIndex){
            this.el.setZIndex(this.zIndex);
        }
        this.el.setStyle(&quot;overflow&quot;, Ext.isGecko ? &quot;auto&quot; : &quot;hidden&quot;);
        if(this.field.msgTarget != 'title'){
            this.field.msgTarget = 'qtip';
        }
        this.field.inEditor = true;
        this.mon(this.field, {
            scope: this,
            blur: this.onBlur,
            specialkey: this.onSpecialKey
        });
        if(this.field.grow){
            this.mon(this.field, &quot;autosize&quot;, this.el.sync,  this.el, {delay:1});
        }
        this.field.render(this.el).show();
        this.field.getEl().dom.name = '';
        if(this.swallowKeys){
            this.field.el.swallowEvent([
                'keypress', // *** Opera
                'keydown'   // *** all other browsers
            ]);
        }
    },

    // private
    onSpecialKey : function(field, e){
        var key = e.getKey(),
            complete = this.completeOnEnter &amp;&amp; key == e.ENTER,
            cancel = this.cancelOnEsc &amp;&amp; key == e.ESC;
        if(complete || cancel){
            e.stopEvent();
            if(complete){
                this.completeEdit();
            }else{
                this.cancelEdit();
            }
            if(field.triggerBlur){
                field.triggerBlur();
            }
        }
        this.fireEvent('specialkey', field, e);
    },

<span id='Ext-Editor-method-startEdit'>    /**
</span>     * Starts the editing process and shows the editor.
     * @param {Mixed} el The element to edit
     * @param {String} value (optional) A value to initialize the editor with. If a value is not provided, it defaults
      * to the innerHTML of el.
     */
    startEdit : function(el, value){
        if(this.editing){
            this.completeEdit();
        }
        this.boundEl = Ext.get(el);
        var v = value !== undefined ? value : this.boundEl.dom.innerHTML;
        if(!this.rendered){
            this.render(this.parentEl || document.body);
        }
        if(this.fireEvent(&quot;beforestartedit&quot;, this, this.boundEl, v) !== false){
            this.startValue = v;
            this.field.reset();
            this.field.setValue(v);
            this.realign(true);
            this.editing = true;
            this.show();
        }
    },

    // private
    doAutoSize : function(){
        if(this.autoSize){
            var sz = this.boundEl.getSize(),
                fs = this.field.getSize();

            switch(this.autoSize){
                case &quot;width&quot;:
                    this.setSize(sz.width, fs.height);
                    break;
                case &quot;height&quot;:
                    this.setSize(fs.width, sz.height);
                    break;
                case &quot;none&quot;:
                    this.setSize(fs.width, fs.height);
                    break;
                default:
                    this.setSize(sz.width, sz.height);
            }
        }
    },

<span id='Ext-Editor-method-setSize'>    /**
</span>     * Sets the height and width of this editor.
     * @param {Number} width The new width
     * @param {Number} height The new height
     */
    setSize : function(w, h){
        delete this.field.lastSize;
        this.field.setSize(w, h);
        if(this.el){
            // IE7 in strict mode doesn't size properly.
            if(Ext.isGecko2 || Ext.isOpera || (Ext.isIE7 &amp;&amp; Ext.isStrict)){
                // prevent layer scrollbars
                this.el.setSize(w, h);
            }
            this.el.sync();
        }
    },

<span id='Ext-Editor-method-realign'>    /**
</span>     * Realigns the editor to the bound field based on the current alignment config value.
     * @param {Boolean} autoSize (optional) True to size the field to the dimensions of the bound element.
     */
    realign : function(autoSize){
        if(autoSize === true){
            this.doAutoSize();
        }
        this.el.alignTo(this.boundEl, this.alignment, this.offsets);
    },

<span id='Ext-Editor-method-completeEdit'>    /**
</span>     * Ends the editing process, persists the changed value to the underlying field, and hides the editor.
     * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after edit (defaults to false)
     */
    completeEdit : function(remainVisible){
        if(!this.editing){
            return;
        }
        // Assert combo values first
        if (this.field.assertValue) {
            this.field.assertValue();
        }
        var v = this.getValue();
        if(!this.field.isValid()){
            if(this.revertInvalid !== false){
                this.cancelEdit(remainVisible);
            }
            return;
        }
        if(String(v) === String(this.startValue) &amp;&amp; this.ignoreNoChange){
            this.hideEdit(remainVisible);
            return;
        }
        if(this.fireEvent(&quot;beforecomplete&quot;, this, v, this.startValue) !== false){
            v = this.getValue();
            if(this.updateEl &amp;&amp; this.boundEl){
                this.boundEl.update(v);
            }
            this.hideEdit(remainVisible);
            this.fireEvent(&quot;complete&quot;, this, v, this.startValue);
        }
    },

    // private
    onShow : function(){
        this.el.show();
        if(this.hideEl !== false){
            this.boundEl.hide();
        }
        this.field.show().focus(false, true);
        this.fireEvent(&quot;startedit&quot;, this.boundEl, this.startValue);
    },

<span id='Ext-Editor-method-cancelEdit'>    /**
</span>     * Cancels the editing process and hides the editor without persisting any changes.  The field value will be
     * reverted to the original starting value.
     * @param {Boolean} remainVisible Override the default behavior and keep the editor visible after
     * cancel (defaults to false)
     */
    cancelEdit : function(remainVisible){
        if(this.editing){
            var v = this.getValue();
            this.setValue(this.startValue);
            this.hideEdit(remainVisible);
            this.fireEvent(&quot;canceledit&quot;, this, v, this.startValue);
        }
    },

    // private
    hideEdit: function(remainVisible){
        if(remainVisible !== true){
            this.editing = false;
            this.hide();
        }
    },

    // private
    onBlur : function(){
        // selectSameEditor flag allows the same editor to be started without onBlur firing on itself
        if(this.allowBlur === true &amp;&amp; this.editing &amp;&amp; this.selectSameEditor !== true){
            this.completeEdit();
        }
    },

    // private
    onHide : function(){
        if(this.editing){
            this.completeEdit();
            return;
        }
        this.field.blur();
        if(this.field.collapse){
            this.field.collapse();
        }
        this.el.hide();
        if(this.hideEl !== false){
            this.boundEl.show();
        }
    },

<span id='Ext-Editor-method-setValue'>    /**
</span>     * Sets the data value of the editor
     * @param {Mixed} value Any valid value supported by the underlying field
     */
    setValue : function(v){
        this.field.setValue(v);
    },

<span id='Ext-Editor-method-getValue'>    /**
</span>     * Gets the data value of the editor
     * @return {Mixed} The data value
     */
    getValue : function(){
        return this.field.getValue();
    },

    beforeDestroy : function(){
        Ext.destroyMembers(this, 'field');

        delete this.parentEl;
        delete this.boundEl;
    }
});
Ext.reg('editor', Ext.Editor);
</pre>
</body>
</html>
